import React, {useEffect, useState} from 'react';
import './index.css'

import Swiper from 'swiper/js/swiper'
import 'swiper/css/swiper.min.css'
import http from "../../../util/http";
import {useNavigate} from "react-router-dom";

function ImgNews(props) {
    let navigate = useNavigate();
    const [data, setData] = useState([]);
    useEffect(() => {
        // 配置swiper播放 配置项都写这里面
        let mySwiperImg = new Swiper('.img-news-main', {
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            // loop: true,
            speed: 700,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            observer: true,
            on: {
                resize: function () {
                    mySwiperImg.update()
                },
            },
        });
        // 悬停时暂停/离开时继续
        const container = document.querySelector('.img-news-main');
        const stop = () => mySwiperImg.autoplay.stop();
        const start = () => mySwiperImg.autoplay.start();
        if (container) {
            container.addEventListener('mouseenter', stop);
            container.addEventListener('mouseleave', start);
        }

        // 清理事件和销毁swiper
        return () => {
            if (container) {
                container.removeEventListener('mouseenter', stop);
                container.removeEventListener('mouseleave', start);
            }
            mySwiperImg.destroy();
        };
    }, [data])
    
    useEffect(() => {
        http.doPost('/doc/getdoc', {category: 256, pageNum: 1, pageSize: 10}).then(res => {
            if (res.status === 200) {
                let data = []
                res.data.list.map(item => {
                    // 不 == 0 的时候，才有可能展示数据
                    // 如果是 undefined 的话
                    if (item.sffb === undefined){
                        if (item.imgUrl && item.imgUrl !== "") {
                            data.push(item)
                        }
                    }else if (item.sffb !== 0 ){
                        if (item.imgUrl && item.imgUrl !== "") {
                            data.push(item)
                        }
                    }

                })
                setData(data)
            }
        })
    }, [])

    function openUrl(docId) {
        if (docId && docId !== "") {
            navigate('/portal/details', {
                state: {docId, page: "home", text: ""}
            });
        }
    }
    const calFontSize = (subject) => {
        if (subject && subject.length >= 36) {
            return { fontSize: '16px' }; // 统一返回对象
        }
        return { fontSize: '16px' };
    };
    return (
        <div className="swiper-container img-news-main">
            <div className="swiper-wrapper">
                {
                    data.map((item, index) => {
                            return (
                                <div className="swiper-slide img-news-one" key={item.id}
                                     onClick={() => openUrl(item.id)}>
                                     <img style={{width: '100%'}} src={item.imgUrl} alt={item.docSubject}/>
                                    <div
                                        className="img-news-one-title"
                                    >
                                        <span
                                            className="img-news-one-title-content"
                                            style={calFontSize(item.docSubject)}
                                        >
                                            {item.docSubject}
                                        </span>

                                    </div>
                                </div>
                            )

                    })
                }
            </div>
            <span className="swiper-pagination"></span>
        </div>
    );
}

export default ImgNews;